import React from 'react'
import { Route } from 'react-router-dom'

//导入内部组件
import News from '../News'
import Index from '../Index'
import HouseList from '../HouseList'
import Profile from '../Profile'


// 导入TabBar组件
import { TabBar } from 'antd-mobile';
import './index.css'


const tableItems = [
  {
    title: '首页',
    icon: 'iconfont icon-ind',
    path: '/home'
  }, {
    title: '找房',
    icon: 'iconfont icon-findHouse',
    path: '/home/list'
  },
  // {
  //   title: '咨询',
  //   icon: 'iconfont icon-infom',
  //   path: '/home/news'
  // }, 
  {
    title: '我的',
    icon: 'iconfont icon-my',
    path: '/home/profile'
  }
]

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname,
  };

  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname === this.props.location.pathname) {
      // 此时，路由发生了切换，需要改变数据
      this.setState({
        selectedTab: this.props.location.pathname
      })

    }
  }
  renderTableBarItem() {
    return tableItems.map(item => <TabBar.Item
      title={item.title}
      key={item.title}
      icon={
        <i className={item.icon}></i>
      }
      selectedIcon={
        <i className={item.icon}></i>
      }
      selected={this.state.selectedTab === item.path}
      onPress={() => {
        this.setState({
          selectedTab: item.path,
        });

        //路由切换
        this.props.history.push(item.path)
      }}
    ></TabBar.Item>)
  }

  // 渲染每一个Tab页面对应的内容
  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
      </div>
    );
  }
  render() {
    return (
      <div>
        {/* 渲染子路由 */}
        <Route path='/home/news' component={News}></Route>
        <Route exact path='/home' component={Index}></Route>
        <Route path='/home/list' component={HouseList}></Route>
        <Route path='/home/profile' component={Profile}></Route>

        {/* TabBar底部菜单 */}
        <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
          <TabBar
            noRenderContent='true'
            unselectedTintColor="#888"
            tintColor="#21b97a"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            {this.renderTableBarItem()}
          </TabBar>
        </div>
      </div >
    )
  }
}